<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Canvas setup
        canvas.width = 650;
        canvas.height = 350;
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Style
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round'; // To better match the hand-drawn feel

        const y_center = 150; // Vertical center for the main axis

        // 1. Light Source (Square)
        const boxSize = 90;
        const boxX = 50;
        const boxY = y_center - boxSize / 2;
        ctx.strokeRect(boxX, boxY, boxSize, boxSize);

        // 2. Light Beam
        ctx.beginPath();
        const beamStartX = boxX + boxSize;

        // Wavy part (zig-zag)
        let x = beamStartX;
        const wave_dx = 15;
        const wave_dy = 10;
        ctx.moveTo(x, y_center);
        x += wave_dx; ctx.lineTo(x, y_center - wave_dy);
        x += wave_dx; ctx.lineTo(x, y_center);
        x += wave_dx; ctx.lineTo(x, y_center - wave_dy);
        x += wave_dx; ctx.lineTo(x, y_center);
        x += wave_dx; ctx.lineTo(x, y_center - wave_dy);
        x += wave_dx; ctx.lineTo(x, y_center);
        x += wave_dx; ctx.lineTo(x, y_center - wave_dy);
        x += wave_dx; ctx.lineTo(x, y_center);
        const waveEndX = x;

        // Straight part
        const arrowTipX = 380;
        ctx.lineTo(arrowTipX, y_center);
        ctx.stroke();

        // Arrowhead
        ctx.beginPath();
        const arrowSize = 18;
        const arrowWidth = 8;
        ctx.moveTo(arrowTipX, y_center);
        ctx.lineTo(arrowTipX - arrowSize, y_center - arrowWidth);
        ctx.lineTo(arrowTipX - arrowSize, y_center + arrowWidth);
        ctx.closePath();
        ctx.fill();

        // 3. Target and Axle
        const targetCenterX = 440;
        const targetRadiusX = 35;
        const targetRadiusY = 70;

        // Axle line
        ctx.beginPath();
        ctx.moveTo(targetCenterX - targetRadiusX, y_center);
        const axleEndX = 580;
        ctx.lineTo(axleEndX, y_center);
        ctx.stroke();
        
        // Target (Ellipse)
        ctx.beginPath();
        ctx.ellipse(targetCenterX, y_center, targetRadiusX, targetRadiusY, 0, 0, 2 * Math.PI);
        ctx.stroke();

        // 4. Text Labels
        // Label Font for 'light', 'target', 'axle'
        ctx.font = '24px sans-serif';
        
        // "light"
        ctx.textAlign = 'center';
        ctx.fillText('light', beamStartX + (waveEndX - beamStartX) / 2, y_center - 30);

        // "target"
        ctx.fillText('target', targetCenterX, y_center + targetRadiusY + 30);

        // "axle"
        ctx.textAlign = 'left';
        ctx.fillText('axle', axleEndX + 10, y_center + 8);

        // Figure Caption Font
        ctx.font = 'bold 24px serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 2.84', canvas.width / 2, canvas.height - 30);

    </script>
</body>
</html>